<template>	
    <view class="container">
		<u-navbar title="测试 操作" bgColor="rgba(0,0,0,0)"
		 :fixed="false"  		  	 
		 autoBack="true" >
		</u-navbar>
        <view class="avatarUrl">
            <button  type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
                <image :src="avatarUrl" class="refreshIcon" style="margin-top: 30rpx; width:150rpx;height:150rpx;"></image>
            </button>
        </view>
 
        <view class="nickname" style="display: flex;flex-direction: row;margin-top: 20rpx;">
            <text class="weui-text">昵称：</text>
            <input type="nickname" class="weui-input" 
            :value="nickName" @blur="bindblur" placeholder="请输入昵称"
                @input="bindinput" />
        </view>

        <button type="primary" @click="save" style="width:710rpx;margin-left: 20rpx;margin-top: 20rpx;">
             保存
        </button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
                nickName: ''
            }
        },
        methods: {
            //昵称输入框blur
            bindblur(e) {
                 console.log('nickName', e)
                 this.nickName = e.detail.value;
             },
            //昵称输入框input
             bindinput(e) {
                 console.log('nickName', e)
                 this.nickName = e.detail.value;
             },
            //选择头像
             onChooseavatar(e) {
                console.log(e.detail);
                 this.avatarUrl = e.detail.avatarUrl;
             },
            //保存头像和昵称
            save() {
               
            },
        }
    }
</script>

<style>
.weui-input{
    border: 1px solid gray;
    border-radius: 10rpx;
    height:66rpx;
    font-size: 50rpx;
    width:540rpx;
    margin-left: 20rpx;
}
.weui-text{
    height:66rpx;
    font-size: 40rpx;
    line-height:66rpx;
    width:140rpx;
    margin-left: 20rpx;
}
</style>